<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <script src="lib/jquery-1.11.3.min.js"></script>
            <style>
                *{
                    margin: 0px;
                    padding: 0px;
                }
                .banner{
                    position: relative;
                    height: 100vh;
                    overflow: hidden;
                }
                .banner li,
                .banner li .original,
                .banner li .cuts,
                .banner li .cuts .item img{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0px;
                    left: 0px;
                    z-index: 1;
                }
                .banner li .cuts{
                    display: flex;
                    flex-direction: column;
                }
                .banner li .cuts .item{
                    position: relative;
                    overflow: hidden;
                    flex: 1;
                    transition: 1.5s transform ease-in-out;
                }
                .banner li.leave .cuts .item{
                    transform: translateX(100%);
                }
                .banner li.leave .cuts .item:nth-child(even){
                    transform: translateX(-100%);
                }
                .banner li .cuts .item img{
                    height: 100vh;
                }
                .banner li.next{
                    z-index: 3;
                }
                .banner li.curr{
                    z-index: 4;
                }
                .banner li.opacity .original{
                    opacity: 0;
                }
                .banner li .cuts{
                    z-index: 2;
                }
                .obj-c{
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                
            </style>
        </head>
        <body>
            <ul class="banner">
                <li class="curr">
                    <div class="original"><img src="images/slide1.jpg" class="obj-c"></div>
                </li>
                <li>
                    <div class="original"><img src="images/slide2.jpg" class="obj-c"></div>
                </li>
            </ul>
            <script>
                var autoInt = null;
                var pause = false;
                
                function autoplay(){
                    autoInt = setInterval(function(){
                        if(pause) return false;
                        var curr = $('ul .curr').index();
                        var cut = $('<div class="cuts"></div>');
                        $('ul li').removeClass('next');
                        if($('ul .curr').index() == $('ul li').length - 1){
                            $('ul li').eq(0).addClass('next');
                        }else{
                            $('ul .curr').next().addClass('next');
                        }
                        for(var c = 0;c < 12;c++){
                            var img = $('<img  class="obj-c" />').attr('src',$('ul .curr img').attr('src')).css('top','calc(-100vh / 12 * ' + c + ')');
                            var item = $('<div class="item"></div>').append(img);
                            var cutH1 = 'calc(100% / 12 * ' + c + ')';
                            var cutH2 = 'calc(100% / 12 * ' + (c + 1) + ')';
                            var cssTxt = 'polygon(0% ' + cutH1 + ',100% ' + cutH1 + ',100% ' + cutH2 +',0% ' + cutH2 + ')';
                            var cssTxt1 = 'polygon(0% ' + cutH1 + ',100% ' + cutH1 + ',100% ' + cutH2 +',0% ' + cutH2 + ')';
                            //item.css('clip-path',cssTxt);
                            cut.append(item);
                        }
                        $('ul .curr').append(cut);
                        setTimeout(function(){
                            $('ul .curr').addClass('opacity leave');
                        },10)
                        setTimeout(function(){
                            $('ul .curr')[0].className = '';
                            $('ul .next')[0].className = 'curr';
                            $('ul .cuts').remove();
                        },1510);
                        /*
                        
                        */
                        
                    },3000);
                    
                }
                //$('ul .curr').next().addClass('next');
                //autoplay();
                
                
            </script>
        </body>
        
    </html>
